<template>
  <div class="index">
    <el-table
      :data="tableData"
      style="width: 100%"
      :summary-method="getSummaries"
    >
      <!-- <el-table-column
      prop="date"
      label="日期"
      width="150">
    </el-table-column> -->
      <div></div>
      <el-table-column label="红包按比例分配账单计算" align="center">
        <el-table-column label="红包按比例分配账单计算" align="center">
          <template slot="header" slot-scope="scope">
            <div>
              <table class="el-table__body" style="width: 100%">
                <thead class="is-group has-gutter">
                  <tr>
                    <th class="th">实际支付</th>
                    <th class="th">红包费</th>
                    <th class="th">满减费用</th>
                    <th class="th">运费</th>
                    <th class="th">人数</th>
                    <th class="th">总价</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="tbtr">
                    <td>
                      <el-input
                        v-model="payPrice"
                        placeholder="请输入名称"
                        class="inline-input"
                      ></el-input>
                    </td>
                    <td>
                      <el-input
                        v-model="envelopes"
                        placeholder="请输入名称"
                        class="inline-input"
                      ></el-input>
                    </td>
                    <td>
                      <el-input
                        v-model="reduction"
                        placeholder="请输入名称"
                        class="inline-input"
                      ></el-input>
                    </td>
                    <td>
                      <el-input
                        v-model="freight"
                        placeholder="请输入名称"
                        class="inline-input"
                      ></el-input>
                    </td>
                    <td>
                      <el-input
                        v-model="people"
                        placeholder="请输入名称"
                        class="inline-input"
                      ></el-input>
                    </td>
                    <td>
                      <el-input
                        v-model="allPrice"
                        placeholder="请输入名称"
                        class="inline-input"
                      ></el-input>
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- <el-form
                :inline="true"
                :model="form"
                class="demo-form-inline"
              >
                <el-form-item label="审批人">
                  <el-input
                    v-model="form.people"
                    placeholder="审批人"
                  ></el-input>
                </el-form-item>
              </el-form> -->
              <!-- <el-input
                v-model="people"
                placeholder="请输入名称"
                class="inline-input"
              ></el-input> -->
            </div>
          </template>
          <el-table-column prop="name" label="NAME" width="120">
            <template slot-scope="scope">
              <div>
                <el-input
                  v-model="scope.row.name"
                  placeholder="请输入名称"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="oldPrice" label="食物价格" width="120">
            <template slot-scope="scope">
              <div>
                <el-input
                  v-model="scope.row.oldPrice"
                  placeholder="请输入"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="packing" label="包装费" width="120">
            <template slot-scope="scope">
              <div>
                <el-input
                  v-model="scope.row.packing"
                  placeholder="请输入"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="many" label="算法： 价格 - 价格/总价*优惠价格">
            <template slot-scope="scope">
              <div>
                ({{ parseFloat(scope.row.oldPrice) }} +
                {{ parseFloat(scope.row.packing) }} +
                {{ parseFloat(freight) }} / {{ parseFloat(people) }}) - ({{
                  parseFloat(scope.row.oldPrice)
                }}
                + {{ parseFloat(scope.row.packing) }} +
                {{ parseFloat(freight) }} / {{ parseFloat(people) }}) / ({{
                  parseFloat(envelopes)
                }}
                + {{ parseFloat(reduction) }} + {{ parseFloat(payPrice) }}) *
                ({{ parseFloat(envelopes) }} + {{ parseFloat(reduction) }})
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="zip" label="需支付" width="120">
            <template slot-scope="scope">
              {{ scope.row.toPrice || 0 }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
    <div class="total">
      <div class="asdasd">
        <!-- <i class="el-icon-plus"></i>
        <i class="el-icon-minus"></i> -->
        <el-button icon="el-icon-plus"></el-button>
        <el-button icon="el-icon-minus"></el-button>
      </div>
      <div class="sdfsdfsdf">
        总计:{{ parseInt(totalPrice * 100) / 100 || 0 }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "About",
  components: {},
  computed: {
    allPrice: function () {
      //总价
      return (
        parseInt(
          (parseFloat(this.envelopes) +
            parseFloat(this.reduction) +
            parseFloat(this.payPrice)) *
            100
        ) / 100
      );
    },
    people: function () {
      if (this.tableData.length > 0) {
        this.totalPrice = 0;
        for (let i in this.tableData) {
          this.tableData[i].toPrice =
            parseInt(
              (parseFloat(this.tableData[i].oldPrice) +
                parseFloat(this.tableData[i].packing) +
                parseFloat(this.freight) / parseFloat(this.tableData.length) -
                ((parseFloat(this.tableData[i].oldPrice) +
                  parseFloat(this.tableData[i].packing) +
                  parseFloat(this.freight) /
                    parseFloat(this.tableData.length)) /
                  (parseFloat(this.envelopes) +
                    parseFloat(this.reduction) +
                    parseFloat(this.payPrice))) *
                  (parseFloat(this.envelopes) + parseFloat(this.reduction))) *
                100
            ) / 100;
          this.totalPrice =
            parseFloat(this.totalPrice) + parseFloat(this.tableData[i].toPrice);
        }
      }
      return this.tableData.length;
    },
  },
  data() {
    return {
      form: {
        payPrice: 0, //实际支付
        envelopes: 0, //红包费
        reduction: 0, //满减费用
        freight: 0, //运费
      },
      payPrice: 0, //实际支付
      envelopes: 0, //红包费
      reduction: 0, //满减费用
      freight: 0, //运费
      // people:6,      //人数 改成计算属性了
      totalPrice: 0, //总计
      tableData: [
        { name: "发起人", oldPrice: 0, packing: 0, toPrice: 0, many: 0 },
        { name: "1", oldPrice: 0, packing: 0, toPrice: 0, many: 0 },
        { name: "1", oldPrice: 0, packing: 0, toPrice: 0, many: 0 },
        { name: "1", oldPrice: 0, packing: 0, toPrice: 0, many: 0 },
        { name: "1", oldPrice: 0, packing: 0, toPrice: 0, many: 0 },
      ],
    };
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        // if (index === 0) {
        //   sums[index] = '总价';
        //   return;
        // }
        // const values = data.map(item => Number(item[column.property]));
        // if (!values.every(value => isNaN(value))) {
        //   sums[index] = values.reduce((prev, curr) => {
        //     const value = Number(curr);
        //     if (!isNaN(value)) {
        //       return prev + curr;
        //     } else {
        //       return prev;
        //     }
        //   }, 0);
        //   sums[index] += ' 元';
        // } else {
        //   sums[index] = 'N/A';
        // }
      });
      return 123;
      // return sums;
    },
  },
};
</script>
<style lang="scss" scoped>
.index {
  width: 1140px;
  margin: 0 auto;
}
.th {
  text-align: center;
  background: #fafafa;
  font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
  color: #666;
}
.tbtr td {
  background: #fafafa;
  // padding: 0;
}

.tbtr td ::v-deep .el-input {
  display: inline-block;
  vertical-align: middle;
  width: 119px;
}
::v-deep .el-table thead.is-group th.el-table__cell {
  background: #fafafa;
}
::v-deep .el-table .el-table__cell {
  text-align: center;
}

::v-deep .el-table th.el-table__cell > .cell {
  font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
  color: #666;
}
// .aaa{
//   display: block;
//   width: 100%;
// }

.total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .asdasd {
    flex: 1;
    padding: 12px;
    line-height: 40px;
    border: 1px solid #ebeef5;
    border-top: 0;
    border-right: 0;
    .el-button {
      background: #009688;
      border-color: #009688;
      color: #ffffff;
    }
  }
  .sdfsdfsdf {
    text-align: center;
    width: 118px;
    padding: 12px 0;
    line-height: 40px;
    border: 1px solid #ebeef5;
    // border-left: 0;
    border-top: 0;
  }
}
</style>